<template>
  <div class="tabs">
    <div
      class="tabs-item"
      :class="{ active: active === item.id }"
      v-for="item in data"
      :key="item.id"
      @click="$emit('change', item.id)"
    >
      <div class="tabs-item-text" :class="{ active: active === item.id }">
        {{ item.name }}
      </div>
      <div
        class="tabs-item-symbol"
        :class="{ active: active === item.id }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  model: {
    prop: 'active',
    event: 'change'
  },
  props: {
    active: {
      type: [String, Number],
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'styles/common.scss';
.tabs {
  height: 50px;
  display: flex;
  align-items: flex-start;
  .tabs-item {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-left: 0.4rem;
    cursor: pointer;
    &:first-child {
      margin-left: 0;
    }
    .tabs-item-text {
      flex: 1;
      font-size: 16px;
      color: $colorText2;
      position: relative;
      margin-top: 20px;
      &.active {
        color: $colorPrimary;
      }
    }
    .tabs-item-symbol {
      display: inline-block;
      width: 30px;
      height: 2px;
      background-color: trasparent;
      &.active {
        background-color: $colorPrimary;
      }
    }
  }
}
</style>
